<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        html,
        body {
            margin: auto;
            width: 90%;
            padding: 10px;
            font-size: 25px;
            text-align: center;
        }

        button {
            font-size: 40px;
        }

        .controller {
            margin-top: 1em;
        }
        .selected {
            border-style: solid;
            border-color: crimson;
        }

        .result {
            font-size: 64px;
            color:darkslategray;
            margin-top: 2em;
        }

    </style>
    <title>口算生成器</title>
</head>

<body>
    <div class="controller">
        <button id="btn-add" class="btn selected">加</button>
        <button id="btn-subtract" class="btn">减</button>
        <button id="btn-multiply" class="btn">乘</button>
        <button id="btn-divide" class="btn">除</button>
        <button id="btn-random" class="btn">乱</button>
    </div>

    <div id="result" class="result">
    </div>

    <script>
        var buttons = document.getElementsByClassName("btn");
        function init() {
            for (var btn of buttons) {
                btn.onclick = function(e) {
                    var o = e.target;
                    for (var b of buttons) {
                        if (b != o) {
                            if (b.classList.contains("selected"))
                                b.classList.remove("selected");
                        } else {
                            if (!b.classList.contains("selected"))
                                b.classList.add("selected")
                        }
                    }
                    createMath();
                }
            }
            // create a new math on every tap
            document.onclick = createMath;
        }

        function genAdd() {
            while (1) {
                var a = parseInt(Math.random() * 10);
                var b = parseInt(Math.random() * 10);
                if (a + b > 10) {
                    return `${a} + ${b}`
                }
            }
        }

        function genSubtract() {
            while (1) {
                var a = parseInt(Math.random() * 10);
                var b = parseInt(Math.random() * 10);
                if (a + b > 10) {
                    return `${a + b} - ${a}`
                }
            }
        }

        function genMultiply() {
            var a = parseInt(Math.random() * 9) + 1;
            var b = parseInt(Math.random() * 9) + 1;
            return `${a} x ${b}`
        }

        function genDivide() {
            var a = parseInt(Math.random() * 9) + 1;
            var b = parseInt(Math.random() * 9) + 1;
            return `${a*b} \u00f7 ${a}`
        }

        function genRandom() {
            // Return rand int [start, end)
            function rand_int(start, end) {
                return parseInt(start + Math.random() * (end - start));
            }

            // 两位数乘一位数（不进位）
            function gen_category_01() {
                while (true) {
                    var a = rand_int(1, 100);
                    var b = rand_int(2, 10);

                    if ((a > 10) &&             // 两位数
                        ((a % 10) != 0) &&      // 不是整十
                        ((a % 10) * b < 10) &&  // 不进位
                        (parseInt(a / 10) * b < 10)) {
                        return `${a}×${b}`;
                    }
                }
            }

            // 两位数乘一位数（一次进位）
            function gen_category_02() {
                while (true) {
                    var a = rand_int(1, 100);
                    var b = rand_int(2, 10);

                    if ((a > 10) &&             // 两位数
                        ((a % 10) != 0) &&      // 不是整十
                        ((a % 10) * b >= 10) &&  // 一次进位
                        (parseInt(a / 10) * b < 10)) {
                        return `${a}×${b}`;
                    }
                }
            }
            
            // 整十数、整百数乘一位数
            function gen_category_03() {
                while (true) {
                    var a = rand_int(2, 10) * (10 ** rand_int(1, 3));
                    var b = rand_int(2, 10);

                    return `${a}×${b}`;
                }
            }
            
            // 整十数、整百数乘整十数
            function gen_category_04() {
                while (true) {
                    var a = rand_int(2, 10);
                    var b = rand_int(2, 10);
                    var c = 10 ** rand_int(1, 3);

                    return `${a * c}×${b * 10}`;
                }
            }

            // 整十数、整百数除以整十数
            function gen_category_05() {
                while (true) {
                    var a = rand_int(2, 10)* (10 ** rand_int(1, 3));
                    var b = rand_int(2, 10) * 10;

                    if (a % b == 0) {
                        return `${a}\u00f7${b}`;
                    }
                }
            }
            
            // 几百几十除以整十数(表内除法)
            function gen_category_06() {
                while (true) {
                    var a = rand_int(2, 10);
                    var b = rand_int(2, 10);
                    var c = 10 ** rand_int(1, 3);

                    return `${a * c * b}\u00f7${b * 10}`;
                }
            }

            // 两位数除以两位数（能整除）
            function gen_category_061() {
                while (true) {
                    var a = rand_int(2, 10);
                    var b = rand_int(10, 100);

                    if (a * b < 100) {
                        return `${a * b}\u00f7${b}`;
                    }
                }
            }

            // 几百几十除以一位数（表内除法、首位能整除）
            function gen_category_07() {
                while (true) {
                    var a = rand_int(2, 10);
                    var b = rand_int(2, 10);

                    if (a * b > 10) {
                        return `${a * b * 10}\u00f7${b}`;
                    }
                }
            }

            // 两位数除以一位数（首位能整除且无余数）
            function gen_category_08() {
                while (true) {
                    var a = rand_int(2, 100);
                    var b = rand_int(2, 5);
                    var c = a * b;

                    if ((c > 10) &&
                        (c < 100) &&
                        (parseInt(c/10) % b == 0)) {
                        return `${c}\u00f7${b}`;
                    }
                }
            }

            // 两位数除以一位数（首位不能整除且无余数）
            function gen_category_09() {
                while (true) {
                    var a = rand_int(2, 100);
                    var b = rand_int(2, 5);
                    var c = a * b;

                    if ((c > 10) &&
                        (c < 100) &&
                        (parseInt(c/10) % b != 0)) {
                        return `${c}\u00f7${b}`;
                    }
                }
            }
            
            // 两位数加两位数（不进位）
            function gen_category_10() {
                while (true) {
                    var a = rand_int(10, 100);
                    var b = rand_int(10, 100);

                    if ((a%10 + b%10 < 10) &&
                        (parseInt(a/10) + parseInt(b/10) < 10)) {
                        return `${a}+${b}`;
                    }
                }
            }

            // 两位数加两位数（进位）
            function gen_category_11() {
                while (true) {
                    var a = rand_int(10, 100);
                    var b = rand_int(10, 100);

                    if ((a%10 + b%10 >= 10) &&
                        (a+b<100)) {
                        return `${a}+${b}`;
                    }
                }
            }

            // 两位数减两位数（不退位）
            function gen_category_12() {
                while (true) {
                    var a = rand_int(10, 100);
                    var b = rand_int(10, 100);
                    var c = a + b;

                    if ((a%10 + b%10 < 10) &&
                        (parseInt(a/10) + parseInt(b/10) < 10)) {
                        return `${c}-${b}`;
                    }
                }
            }

            // 两位数减两位数（退位）
            function gen_category_13() {
                while (true) {
                    var a = rand_int(10, 100);
                    var b = rand_int(10, 100);
                    var c = a + b;

                    if ((a%10 + b%10 >= 10) && (c < 100)) {
                        return `${c}-${b}`;
                    }
                }
            }


            // 整十数、整百数加整十数
            function gen_category_14() {
                while (true) {
                    var a = rand_int(2, 100);
                    var b = rand_int(2, 10);

                    return `${a*10}+${b*10}`;
                }
            }

            // 整十数、整百数减整十数
            function gen_category_15() {
                while (true) {
                    var a = rand_int(2, 100);
                    var b = rand_int(2, 10);
                    var c = a*10 + b*10;

                    if (c < 1000) {
                        return `${c}-${b*10}`;
                    }
                }
            }

            let funcs = [
                gen_category_01,
                gen_category_02,
                gen_category_03,
                gen_category_04,
                gen_category_05,
                gen_category_06,
                gen_category_061,
                gen_category_07,
                gen_category_08,
                gen_category_09,
                gen_category_10,
                gen_category_11,
                gen_category_12,
                gen_category_13,
                gen_category_14,
                gen_category_15
            ]
            let choice = rand_int(0, funcs.length)
            return funcs[choice]()
        }

        function createMath() {
            var activeBtn = document.getElementsByClassName("selected");
            var btnId = activeBtn.item(0).id;
            var result = "";
            if (btnId == "btn-add") {
                result = genAdd();
            } else if (btnId == "btn-subtract") {
                result = genSubtract();
            } else if (btnId == "btn-multiply") {
                result = genMultiply();
            } else if (btnId == "btn-divide") {
                result = genDivide();
            } else if (btnId == "btn-random") {
                result = genRandom();
            }
            document.getElementById("result").innerText = result;
        }

        init();
        createMath();
    </script>
</body>
